<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs @tab-click="onTabClick" value="first">
          <!-- 角色管理 -->
          <el-tab-pane  label="角色管理" name="first">
            <el-button @click="ShowAddRole" icon="el-icon-plus" size="small" type="primary">新增角色</el-button>
             <el-table
              empty-text="鸡哥努力获取数据中(你鸡哥厉不厉害)"
              ref="table"
              :data="tableData"
              border
              style="width: 100%;margin-top:20px">
              <el-table-column
                align="center" 
                type="index"
                label="序号"
                width="120" />
              <el-table-column
                prop="name"
                label="角色"
                width="240" />
              <el-table-column
                prop="description"
                label="描述"/>
              <el-table-column
                  label="操作">
                <template v-slot="{row}">
                  <el-button type="success">分配权限</el-button>
                  <el-button type="primary" @click="editRole(row.id)">编辑</el-button>
                  <el-button type="danger" @click="deleteRole(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: end;margin-top:10px" >
              <el-pagination
                :page-sizes="[2,4,6,8,10]"
                :current-page.sync="page.page"
                :page-size.sync="page.pagesize"
                :total="page.total"
                @current-change="getRoles"
                @size-change="getRoles"
                layout="total, sizes, prev, pager, next, jumper"
              />
            </div>
          </el-tab-pane>
          <!-- 公司信息 -->
          <el-tab-pane ref="company" label="公司信息" name="second">
            <el-alert
              show-icon
              title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
              type="info"
              :closable="false">
            </el-alert>
            <el-form label-width="80px" style="margin-top:50px">
              <el-form-item label="公司名称">
                <el-input v-model="company.name" disabled style="width:400px" />
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input v-model="company.companyAddress" disabled style="width:400px" />
              </el-form-item>
              <el-form-item label="公司邮箱">
                <el-input v-model="company.mailbox" disabled style="width:400px" />
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="company.remarks" disabled style="width:400px" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <AddRole @addRoleSuccess="addRoleSuccess" :addRoleVisible.sync="addRoleVisible" />
      <EditRole @editRoleSuccess="editRoleSuccess" :roleId="roleId" :editRoleVisible.sync="editRoleVisible" /> 
    </div>
  </div>
</template>

<script>
import { getRoles, getCompany, delRole } from '@/api/setting.js'
import AddRole from '@/views/setting/AddRole'
import EditRole from '@/views/setting/EditRole'
import axios from 'axios'
export default {
  name: 'Setting',
  components: {
    AddRole,
    EditRole
  },
  data() {
    return {
      // 编辑角色传递id
      roleId:'',
      // 表格中角色数据
      tableData: null,
      // 分页信息 (分页配置项)
      page: {
        page: 1,
        pagesize: 10,
        total:0
      },
      // 公司信息
      company: {},
      // 添加角色显示
      addRoleVisible: false,
      // 编辑角色显示
      editRoleVisible:false,
      //切换tab栏的方法
      changeTab: {
        '0':this.getRoles,
        '1':this.getCompany
      }
    }
  },
  methods: {
    // 获取全部角色
    async getRoles() { 
      const { rows,total } = await getRoles(this.page, this.$refs.table.$el)
      this.tableData = rows
      this.page.total = total
    },
    // 获取公司信息
    async getCompany() {
      const company = await getCompany(this.$refs.company.$el)
      this.company = company[0]
    },
    // 显示新增弹层
    ShowAddRole() { 
      this.addRoleVisible = true
    },
    // 显示编辑弹层
    editRole(id) {
      this.roleId = id
      this.editRoleVisible = true
    },
    // 新增角色成功
    addRoleSuccess() { 
      this.getRoles()
      this.$message({
        message: '添加成功',
        type:'success'
      })
    },
    // 编辑角色成功
    editRoleSuccess() { 
      this.getRoles()
      this.$message({
        message: '编辑成功',
        type: 'success'
      })
    },
    // 删除角色
    deleteRole(id) {
      // 在点击删除角色的时候通过 axios进行取消发送请求操作的初始化
      const cancelToken = axios.CancelToken
      let source
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        //是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 ESC 键）进行区分
        distinguishCancelAndClose:true,
        //MessageBox 关闭前的回调，会暂停实例的关闭 action 的值为'confirm', 'cancel'或'close'
        //instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法
        //done 用于关闭 MessageBox 实例
        beforeClose: async (action,instance,done)=>{
          if(action === 'confirm'){
            // 当只有点击了确认，才对source进行赋值，方便我们后续对cancel的操作
            source = cancelToken.source()
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = '删除中...';
            try {
              // 对这段代码进行try,如果可以避免控制台在我们进行取消请求操作时不进行报错
              await delRole(id,source.token)
              if (this.tableData.length === 1 && this.page.page !==1) { 
              this.page.page--
              }
              done()
              //消息提示
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              await this.getRoles()
            } catch (error) {
              console.log(error);
            }finally{
              setTimeout(() => {
                  instance.confirmButtonText = '确认';
                  instance.confirmButtonLoading = false;
              }, 300);
            }
          }else if(action === 'cancel'){
            //先判断是否发送了请求(判断source是否有值)
            if(source){
              // (如果source存在，则先取消当前请求
              source.cancel('删除操作已取消')
              // 在取消请求后此时程序会进入到响应拦截器中，因为我们在相应拦截器对异常统一做了处理，所以此处不需要再进行处理
            }
            done()
          }else if(action === 'close'){
            done()
          }
        }
      }).catch(()=>{

      })
      // .then(async () => {
      //   // 点击确定后进入的分支
      //   try {
      //     //调用删除接口
      //     await delRole(id)
      //     //删除成功后刷新table数据
      //     // 判断当前的table数据的长度和当前页是否是第一页，满足判断条件则说明当前是最后一个的仅有的一个数据，则对page.page进行--
      //     if (this.tableData.length === 1 && this.page.page !==1) { 
      //       this.page.page--
      //     }
      //     await this.getRoles()
      //     //消息提示
      //     this.$message({
      //       type: 'success',
      //       message: '删除成功!'
      //     });
      //   } catch (error) {
      //     console.log('系统出错，请稍后再试',error);
      //   }
       
      //  }).catch(() => {
      //   // 点击取消后进入的分支，由于我们暂时没有代码要写，故先清空内容放在这里以防后面有需求
      // });
    },
    // 在切换tab栏后触发的事件
    async onTabClick(tab) {
      this.changeTab[tab.index]()
    }
  },
  // 在第一次加载到这个文件的时候执行
  async mounted() {
    await this.getRoles()
  }
}
</script>

<style>
  
</style>